<template>
    <div class="new-recommend">
        <header class="new-recommend-header">
            <p class="new-recommend-header-title">
                <span class="iconfont">&#xe615;</span>
                <span style="padding: 0 15px;">新上好课</span>
                <span class="iconfont">&#xe615;</span>
            </p>
        </header>
        <div class="videos">
            <div class="videoBox" @click="toCrouseInfo" v-for="item in recommends" :key="item.title">
                <div class="img">
                    <div class="tip">
                        <span>{{item.group}}</span>
                        <span>{{item.subject}}</span>
                    </div>
                    <img :src="item.img"/>
                </div>
                <div class="info">
                    <p class="title">{{item.title}}</p>
                    <div class="status">
                        <div class="people">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#iconren"/>
                            </svg>
                            <span>{{item.peoples}}</span>
                        </div>
                        <div class="star">
                            <svg class="icon" aria-hidden="true" v-for="n in item.fraction" :key="n">
                                <use xlink:href="#iconStarlarge"/>
                            </svg>
                        </div>
                    </div>
                    <p class="money">¥&nbsp;{{item.price}}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        recommends: [
          {
            img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574594109126&di=52ff83fdd2000fdadac05690c2c5f008&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F01%2F13%2F2b79e955cca398a00d6140f6ebea573d.jpg',
            group: '高中',
            subject: '化学',
            title: '化学反应方向',
            peoples: 2978,
            price: 14,
            fraction: 5,
          },
          {
            img: 'http://img3.imgtn.bdimg.com/it/u=3026077496,476856595&fm=26&gp=0.jpg',
            group: '高中',
            subject: '化学',
            title: '电解',
            peoples: 3278,
            price: 9,
            fraction: 5,
          }, {
            img: 'http://img2.imgtn.bdimg.com/it/u=4166244577,2586509393&fm=26&gp=0.jpg',
            group: '高中',
            subject: '化学',
            title: '去杂质的放大',
            peoples: 8978,
            price: 33,
            fraction: 5,
          }, {
            img: 'http://img5.imgtn.bdimg.com/it/u=2765907093,3537716688&fm=26&gp=0.jpg',
            group: '高中',
            subject: '化学',
            title: '化学平衡',
            peoples: 2978,
            price: 35,
            fraction: 5,
          }, {
            img: 'http://img2.imgtn.bdimg.com/it/u=27255172,10614190&fm=15&gp=0.jpg',
            group: '高中',
            subject: '化学',
            title: '盐类水解',
            peoples: 2978,
            price: 19,
            fraction: 5,
          }, {
            img: 'http://img.gaosan.com/upload/201911/20191122111616560.jpg',
            group: '高中',
            subject: '物理',
            title: '角速度与线速度关系',
            peoples: 2978,
            price: 0,
            fraction: 5,
          }, {
            img: 'http://img2.imgtn.bdimg.com/it/u=459219160,3226234960&fm=26&gp=0.jpg',
            group: '高中',
            subject: '化学',
            title: '有机物的状态',
            peoples: 2278,
            price: 23,
            fraction: 5,
          }, {
            img: 'http://img.gaosan.com/upload/201911/20191122163740215.jpg',
            group: '高中',
            subject: '物理',
            title: '分子与势能的距离关系',
            peoples: 9278,
            price: 0,
            fraction: 5,
          }, {
            img: 'http://img2.imgtn.bdimg.com/it/u=2792829531,3315109755&fm=15&gp=0.jpg',
            group: '高中',
            subject: '化学',
            title: '氧化还原反应',
            peoples: 3978,
            price: 43,
            fraction: 5,
          }, {
            img: 'http://img1.imgtn.bdimg.com/it/u=2923157171,3993811986&fm=15&gp=0.jpg',
            group: '高中',
            subject: '化学',
            title: '化学能转化为电脑——电池',
            peoples: 1922,
            price: 19,
            fraction: 4,
          },
        ]
      };
    },
    components: {},
    created() {
    },
    methods: {
      toCrouseInfo() {
        this.$router.push("/crouse_info");
      }
    }
  };
</script>
<style lang="scss" scoped>
    @media screen and (min-width: 1200px) {
        .new-recommend {
            overflow: hidden;
            width: 100%;

            &-header {
                &-title {
                    height: 50px;
                    display: flex;
                    font-size: 30px;
                    justify-content: center;
                    align-items: center;
                    padding: 20px 0 15px 0;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.5);

                    .iconfont {
                        font-size: 30px;
                    }
                }
            }

            .videos {
                margin-top: 10px;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                flex-wrap: wrap;

                .videoBox {
                    cursor: pointer;
                    display: inline-block;
                    width: 18%;
                    margin: 10px;
                    min-height: 200px;
                    overflow: hidden;
                    transition: all 0.3s;

                    &:hover {
                        transform: translateY(-10px);

                        .info {
                            .title,
                            .money {
                                color: #ff6666;
                            }
                        }
                    }

                    .img {
                        border-radius: 10px;
                        height: 130px;
                        overflow: hidden;
                        position: relative;

                        img {
                            width: 100%;
                        }

                        .tip {
                            position: absolute;
                            bottom: 5px;
                            width: 100%;
                            overflow: hidden;
                            display: flex;
                            justify-content: flex-start;

                            span {
                                margin-left: 10px;
                                display: inline-block;
                                line-height: 20px;
                                border-radius: 5px;
                                width: 60px;
                                height: 20px;
                                color: #fff;
                                font-weight: 200;
                                font-size: 12px;
                                background-color: rgba(0, 0, 0, 0.5);
                            }
                        }
                    }

                    .info {
                        text-align: left;

                        .title {
                            cursor: pointer;
                            margin: 10px 0;
                            line-height: 20px;
                            font-size: 16px;
                            font-weight: bold;
                            transition: all 0.3s;
                        }

                        .status {
                            display: flex;
                            justify-content: flex-start;

                            .people {
                                margin-bottom: 10px;
                                display: inherit;
                                height: 20px;

                                .icon {
                                    width: 15px;
                                    height: 15px;
                                }

                                span {
                                    margin-left: 10px;
                                    text-align: center;
                                    margin-bottom: 2px;
                                    line-height: 20px;
                                    font-size: 13px;
                                    color: #777;
                                }
                            }

                            .star {
                                margin-left: 20px;

                                .icon {
                                    padding-right: 2px;
                                    width: 12px;
                                    height: 12px;
                                }
                            }
                        }

                        .money {
                            font-size: 16px;
                            font-weight: bold;
                            color: #555;
                            transition: all 0.3s;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .new-recommend {
            overflow: hidden;
            width: 100%;

            &-header {
                &-title {
                    height: 50px;
                    display: flex;
                    font-size: 30px;
                    justify-content: center;
                    align-items: center;
                    padding: 10px 0 15px 0;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.5);

                    .iconfont {
                        font-size: 30px;
                    }
                }
            }

            .videos {
                margin-top: 10px;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                flex-wrap: wrap;

                .videoBox {
                    cursor: pointer;
                    display: inline-block;
                    width: 21%;
                    margin: 10px;
                    height: 220px;
                    overflow: hidden;

                    .img {
                        border-radius: 10px;
                        height: 110px;
                        overflow: hidden;
                        position: relative;

                        img {
                            width: 100%;
                            height: 100%;
                        }

                        .tip {
                            position: absolute;
                            bottom: 5px;
                            width: 100%;
                            overflow: hidden;
                            display: flex;
                            justify-content: flex-start;

                            span {
                                margin-left: 10px;
                                display: inline-block;
                                line-height: 20px;
                                border-radius: 5px;
                                width: 60px;
                                height: 20px;
                                color: #fff;
                                font-weight: 200;
                                font-size: 12px;
                                background-color: rgba(0, 0, 0, 0.5);
                            }
                        }
                    }

                    .info {
                        text-align: left;

                        .title {
                            cursor: pointer;
                            margin: 10px 0;
                            height: 20px;
                            font-size: 16px;
                            font-weight: bold;
                            transition: all 0.3s;
                        }

                        .status {
                            display: flex;
                            justify-content: flex-start;

                            .people {
                                margin-bottom: 10px;
                                display: inherit;
                                height: 20px;

                                .icon {
                                    width: 15px;
                                    height: 15px;
                                }

                                span {
                                    margin-left: 10px;
                                    text-align: center;
                                    margin-bottom: 2px;
                                    line-height: 20px;
                                    font-size: 13px;
                                    color: #777;
                                }
                            }

                            .star {
                                margin-left: 20px;

                                .icon {
                                    padding-right: 2px;
                                    width: 12px;
                                    height: 12px;
                                }
                            }
                        }

                        .money {
                            font-size: 16px;
                            font-weight: bold;
                            color: #555;
                            transition: all 0.3s;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width: 992px) and (min-width: 768px) {
    }

    @media screen and (max-width: 768px) and (min-width: 576px) {
    }

    @media screen and (max-width: 576px) {
        .new-recommend {
            overflow: hidden;
            width: 100%;

            &-header {
                &-title {
                    height: 15px;
                    display: flex;
                    font-size: 16px;
                    justify-content: center;
                    align-items: center;
                    padding: 10px 0;

                    .iconfont {
                        font-size: 20px;
                    }
                }
            }

            .videos {
                display: flex;
                justify-content: center;
                align-items: flex-start;
                flex-wrap: wrap;

                .videoBox {
                    width: 100%;
                    margin: 10px;
                    display: flex;
                    overflow: hidden;
                    transition: all 0.3s;

                    .img {
                        border-radius: 10px;
                        width: 40%;
                        height: 70px;
                        overflow: hidden;
                        position: relative;

                        img {
                            width: 100%;
                            height: 100%;
                        }

                        .tip {
                            position: absolute;
                            bottom: 5px;
                            width: 100%;
                            overflow: hidden;
                            display: flex;
                            justify-content: flex-start;
                            margin-left: 5px;

                            span {
                                margin-right: 5px;
                                display: inline-block;
                                line-height: 17px;
                                border-radius: 4px;
                                width: 40px;
                                height: 17px;
                                color: #fff;
                                font-weight: 200;
                                font-size: 13px;
                                background-color: rgba(0, 0, 0, 0.5);
                            }
                        }
                    }

                    .info {
                        margin-left: 10px;
                        text-align: left;

                        .title {
                            cursor: pointer;
                            line-height: 20px;
                            font-size: 14px;
                            font-weight: 500;
                            transition: all 0.3s;
                        }

                        .status {
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            margin: 8px 0;

                            .people {
                                .icon {
                                    width: 15px;
                                    height: 15px;
                                }

                                span {
                                    margin-left: 10px;
                                    text-align: center;
                                    margin-bottom: 2px;
                                    line-height: 20px;
                                    font-size: 13px;
                                    color: #777;
                                }
                            }

                            .star {
                                margin-left: 20px;

                                .icon {
                                    padding-right: 2px;
                                    width: 12px;
                                    height: 12px;
                                }
                            }
                        }

                        .money {
                            font-size: 16px;
                            font-weight: bold;
                            color: #555;
                            transition: all 0.3s;
                        }
                    }
                }
            }
        }
    }
</style>
